<script setup>
import { ref } from "vue";
import { httpRequest } from "../../utils/http";
import btnModule from "../../components/index/btnModule.vue";

const show = ref(false);
const isShow = ref(3);
const cate = ref([]);
const isWindow = ref(0);
const textarea = ref("");
const current = ref(0)
console.log("textarea", textarea.value);
const choose = (n) => {
  isShow.value = n;
  isWindow.value = 0;
  if(n==3)current.value = 0
  if(n==0)current.value = 1
  if(n==1)current.value = 2
   
};
const scrollCate = ref([]);
const getCate = async () => {
  const res = await httpRequest("/api/getVoiceCateList", "POST");
  console.log(res);
  scrollCate.value = res.data;
  cate.value = [
    {
      id: 0,
      name: "全部",
    },
    ...res.data,
  ];
};
const creatTaskId = ref('')
const noDel = ref(false)
const getTask = async() => {
  const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    if(res.data){
  creatTaskId.value = res.data.templateId
  if(res.data.type == 'master2'){
    noDel.value = true
  }
}
}
getTask()

getCate();

const popupChange = (e) => {
  show.value = e.show;
};

const voiceList = ref([]);
const getVoiceAll = async () => {
  const res = await httpRequest(
    "/api/getShopVoiceCopy6ByShopId",
    "POST",
    {
      shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
    }
  );
  console.log(res);
  voiceList.value = res.data;
};
getVoiceAll();
const name = ref("全部");
const isChoose = ref(0);
// const getVoice = async (item) => {
//   isChoose.value = item.id;
//   name.value = item.name;
//   const res = await httpRequest(
//     "/api/getShopVoiceCopyByShopIdAndCateId",
//     "POST",
//     {
//       shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
//       voiceCateId: item.id,
//       type: 1,
//     }
//   );
//   console.log(res);
//   voiceList.value = res.data;
// };

const add = ref(null);
const edit = ref(false);
const addV = (e) => {
  isWindow.value = 0;
  console.log(textarea.value);
  if (e) {
    edit.value = e;
    textarea.value = e.content;
    scrollText.value = e.voiceCateId
  } else {
    edit.value = false;
    textarea.value = ''
  }
  add.value.open("bottom");
};

const scrollText = ref(1);
const clickCate = (item) => {
  scrollText.value = item.id;
};

const addVoice = async () => {
  // if (textarea.value.trim().length < 10 || textarea.value.trim().length > 24)
  //   return uni.showToast({
  //     title: "请输入10-24个字",
  //     icon: "none",
  //   });
  if(!textarea.value.trim())return uni.showToast({title:'请先输入口播内容',icon:'none'})
  if(!(/[\u4e00-\u9fa5a-zA-Z0-9]/.test(textarea.value)))return uni.showToast({title:'至少包含一个字',icon:'none'})
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  if (edit.value.id) {
    //修改
    if(noDel.value)return uni.showToast({
      title: '生成任务中途不可修改口播文案',
      icon: 'none'
    })
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/editShopVoiceCopy6",
      data: {
        // shopVoiceCopy6:{
          content: textarea.value.trim(),
          shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
          id:edit.value.id
        // }
      },
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
      success:(res)=>{
        uni.hideLoading();
      uni.showToast({
        title: "修改成功",
        icon: "none",
      });
      getVoiceAll();
      textarea.value = "";
      add.value.close()
      },
      fail:(err)=>{
        console.log(err);
        uni.hideLoading();
      uni.showToast({
        title: "修改失败",
        icon: "error",
      });
      }
    });
  } else {
    //添加
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/addShopVoiceCopy6",
      data: {
        content: textarea.value.trim(),
        shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
      },
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
      success:(success)=>{
        uni.hideLoading();
        uni.showToast({
        title: "添加成功",
        icon: "none",
      });
      getVoiceAll();
      textarea.value = "";
      add.value.close()
      },
      fail:(fail)=>{
        uni.hideLoading();
        console.log(fail);
        uni.showToast({
        title: "添加失败",
        icon: "error",
      });
      },
    });
  }
};

const delVoice = (item, i) => {
  if(noDel.value)return uni.showToast({
      title: '生成任务中途不可删除口播文案',
      icon: 'none'
    })
  uni.showModal({
    title: "提示",
    content: "确认要删除吗?",
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      console.log(confirm);
      if (confirm) {
        const res = await httpRequest("/api/delShopVoiceCopy6", "POST", {
          shopVoiceCopy6Id: item.id,
        });
        voiceList.value.splice(i, 1);
      }
    },
  });
};
const from = ref(null);
const addM = (e) => {
  if (e) {
    editCopy.value = e;
    shopNam.value = e.shopName;
    shopTime.value = e.shopTime;
    product.value = e.product;
    price.value = e.price;
    character.value = e.character;
    copy1.value = e.copy1;
    copy2.value = e.copy2;
  } else {
    editCopy.value = false;
  }
  from.value.open("bottom");
};
const shopNam = ref(
  uni.getStorageSync("shop")[uni.getStorageSync("index")].shopName || ""
);
const shopTime = ref("");
const product = ref("");
const price = ref("");
const character = ref("");
const copy1 = ref("");
const copy2 = ref("");
const editCopy = ref(false);

const templates = ref([]);

//查询模板
const getTemplate = async () => {
  const res = await httpRequest("/api/getTemplate", "POST", {
    shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
  });
  console.log(res);
  let x = res.data;
  let n = 0;
  // x.forEach((e, i) => {
  //   if (e.moRen == 2) {
  //     e.m = true;
  //     n++;
  //   } else {
  //     e.m = false;
  //   }
  //   if (e.moRen == 1) {
  //     x.splice(i, 1);
  //     x.unshift(e);
  //   }
  // });
  // if (!n) {
  //   x.forEach((e, i) => {
  //     if (e.moRen == 1) {
  //       e.m = true;
  //     }
  //   });
  // }
  // templates.value = x;
  templates.value = res.data;
  console.log(templates.value);
};
const moRen = async (e) => {
  if (e.m) return;
  const res = await httpRequest("/api/editTemplateMoRen", "POST", {
    id: e.id,
    shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
  });
  console.log(res);
  getTemplate();
};
getTemplate();
const addCopy = async () => {
  if (!product.value.trim().length)
    return uni.showToast({ title: "请输入产品名称", icon: "none" });
  if (!price.value.trim().length)
    return uni.showToast({ title: "请输入产品价格", icon: "none" });
  if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(product.value))return uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    product.value = product.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
  if (editCopy.value) {
    //修改产品
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    if(editCopy.value.id == creatTaskId.value)return uni.showToast({
      title: '当前模板正在生成视频中',
      icon: 'none'
    })
    await httpRequest("/api/delTemplate", "POST", {
      id: editCopy.value.id,
    });
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/addTemplate",
      data: {
        shopName: shopNam.value.trim(),
        shopTime: shopTime.value.trim(),
        product: product.value.trim(),
        price: price.value.trim(),
        character: character.value.trim(),
        copy1: copy1.value ? copy1.value.trim() : "",
        copy2: copy2.value ? copy2.value.trim() : "",
        shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
        moRen: editCopy.value.moRen,
      },
      timeout: 50000,
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    uni.hideLoading();
    uni.showToast({
      title: "修改成功",
      icon: "none",
    });
    getTemplate();
    from.value.close()
    shopTime.value = "";
    product.value = "";
    price.value = "";
    character.value = "";
    copy1.value = "";
    copy2.value = "";
  } else {
    //新增文案
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/addTemplate",
      data: {
        shopName: shopNam.value.trim(),
        shopTime: shopTime.value.trim(),
        product: product.value.trim(),
        price: price.value.trim(),
        character: character.value.trim(),
        copy1: copy1.value ? copy1.value.trim() : "",
        copy2: copy2.value ? copy2.value.trim() : "",
        shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
      },
      timeout: 50000,
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    uni.hideLoading();
    uni.showToast({
      title: "添加成功",
      icon: "none",
    });
    getTemplate();
    from.value.close()
    shopNam.value = "";
    shopTime.value = "";
    product.value = "";
    price.value = "";
    character.value = "";
    copy1.value = "";
    copy2.value = "";
  }
};

const delTemplate = (item, i) => {
  if(item.id == creatTaskId.value)return uni.showToast({
      title: '当前模板正在生成视频中',
      icon: 'none'
    })
  uni.showModal({
    title: "提示",
    content: "确认要删除吗?",
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      console.log(confirm);
      if (confirm) {
        const res = await httpRequest("/api/delTemplate", "POST", {
          id: item.id,
        });
        templates.value.splice(i, 1);
      }
    },
  });
};

const close = (e) => {
  if (e == "add") {
    add.value.close();
  } else {
    from.value.close();
    addC.value.close()
  }
};
const copyList = ref([]);
const getCopy = async () => {
  const res = await httpRequest("/api/diyCopyListByShopId", "POST", {
    shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
    type: 0,
  });
  console.log(res);
  copyList.value = res.data;
};
getCopy();

const ai = async (e) => {
  const res = await httpRequest("/api/copywriting", "POST", {
    shopCate2Id:
      uni.getStorageSync("shop")[uni.getStorageSync("index")].shopCate2Obj
        .shopCate2Id,
    shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
    product: "",
    price: "",
    character: "",
    shopName: "",
    shopTime: "",
  });
  let ran = Math.floor(Math.random() * res.data.length);
  if (e == 1) {
    copy1.value = res.data[ran].content;
  } else if (e == 2) {
    copy2.value = res.data[ran].content;
  }
};

const cusTitle = ref("");
const editCus = ref(false);
const addC = ref();
const editItem = ref();

const delW = (e, i) => {
  uni.showModal({
    title: "提示",
    content: "确认要删除吗",
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await httpRequest("/api/delDiyCopy", "POST", {
          diyCopyId: e.id,
        });
        copyList.value.splice(i, 1);
      }
    },
  });
};

const editW = (e) => {
  editItem.value = e;
  editCus.value = true;
  addC.value.open("bottom");
  cusTitle.value = e.content;
};
const addW = () => {
  editCus.value = false;
  cusTitle.value = ''
  addC.value.open("bottom");
};
const addOk = async () => {
  if (!cusTitle.value.trim())
    return uni.showToast({
      title: "输入不能为空",
      icon: "none",
    });
  let result = "";
  let num = 0;
  for (let i = 0; i < cusTitle.value.length; i++) {
    result += cusTitle.value[i];
    if (cusTitle.value[i] == "\n") {
      console.log(1);
      num = 0;
    }
    num++;
    if (num == 15) {
      result += "\n";
      num = 0;
    }
  }
  console.log(result);
  cusTitle.value = result;
  if (editCus.value) {
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/editDiyCopy",
      data: {
        content: cusTitle.value,
        id: editItem.value.id,
      },
      header: {
        Accept: "application/json",
      },
      method: "POST",
    });
    console.log(res);
  } else {
    //新增文案
    const res = await httpRequest("/api/addDiyCopy", "POST", {
      shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
      content: cusTitle.value,
    });
  }
  getCopy();
  addC.value.close();
  cusTitle.value = "";
};

const textInput = (e) => {
      console.log(e);
      let result = '';
      let num = 1
      // let line = 0
      for (let i = 0; i < e.length; i++) {
        // if(line>=5)return uni.showToast({title:'最多输入四行',icon:'none'})
        result += e[i];
        num++
        if(e[i+1]=='\n'){
          num=0
          // line++
        }
        console.log(num);
        console.log(result);
        if (num==13) {
          result += '\n';
          num=1
        }
      }
      cusTitle.value = result
      console.log(cusTitle.value);
    }


const scrollChange = (e) => {
  console.log(e);
  if(e.detail.current==0)isShow.value = 3
  if(e.detail.current==1)isShow.value = 0
  if(e.detail.current==2)isShow.value = 1
}

const changeInput = (e) => {
    if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(textarea.value)) uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    textarea.value = textarea.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
}
</script>

<template>
  <page-meta
    :page-style="'overflow:' + (show ? 'hidden' : 'visible')"
  ></page-meta>
  <view class="page">
    <!-- 下拉弹窗 -->
    <!-- <view class="mengban" v-if="isWindow == 1" @click="isWindow = 0">
      <view class="window">
        <image
          class="window-jiantou"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_sjiao.png"
        />
        <view
          class="cate"
          v-for="(item, index) in cate"
          @click="getVoice(item)"
          :key="index"
          :class="isChoose == item.id ? 'choose' : ''"
          >{{ item.name }}</view
        >
      </view>
    </view> -->
    <view
      style="
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        height: 70rpx;
        border-bottom: 1rpx solid rgb(220, 223, 230);
        padding-top: 48rpx;
        position: relative;
      "
    >
      <text
        class="recom"
        :class="[isShow == 3 ? 'active' : '']"
        @click="choose(3)"
        >产品库</text
      >
      <text
        class="recom"
        :class="[isShow == 0 ? 'active' : '']"
        @click="choose(0)"
        >口播库</text
      >
      <text
        class="recom"
        :class="[isShow == 1 ? 'active' : '']"
        @click="choose(1)"
        >文案库</text
      >
      <view
        class="line"
        :class="{ line1: isShow == 1, line2: isShow == 0 }"
      ></view>
    </view>
    <swiper :current='current' @change='scrollChange' style="min-height: 1000rpx;">
      <swiper-item class="productku">
        <view>
      <view class="kong" v-if="!templates.length">
        <image
          style="width: 610rpx; height: 368rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
        />
        <text>暂无内容</text>
      </view>
      <view v-else>
        <view class="item" v-for="(item, index) in templates" :key="item.id">
          <view
            class="text"
            style="display: flex; justify-content: space-between; border: none"
            >产品名称 <text>{{ item.product }}</text>
          </view>
          <view
            class="text"
            style="display: flex; justify-content: space-between"
            >产品价格 <text>{{ item.price }}</text>
          </view>
          <view class="item-bottom">
            <view class="btns">
              <image
                @click="addM(item)"
                class="edit"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_xgai.png"
              />
              <image
                @click="delTemplate(item, index)"
                class="del"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_schu.png"
              />
            </view>
          </view>
        </view>
        
      </view>
      </view>
      </swiper-item>
      
      <swiper-item class="bottom">
        <view>
      <!-- <view class="all" @click="isWindow = 1">
        {{ name }}
        <image
          style="width: 32rpx; height: 32rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_Select.png"
        />
         <view class="sanjiao"></view> 
      </view> -->
      <view class="kong" v-if="!voiceList.length">
        <image
          style="width: 610rpx; height: 368rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
        />
        <text>暂无内容</text>
      </view>
      <view v-else>
        <view class="item" v-for="(item, index) in voiceList" :key="item.id">
          <view class="text">{{ item.content }}</view>
          <view class="item-bottom">
            <!-- <view class="lei">{{ scrollCate[item.voiceCateId - 1].name }}</view> -->
            <view class="btns">
              <image
                @click="addV(item)"
                class="edit"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_xgai.png"
              />
              <image
                @click="delVoice(item, index)"
                class="del"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_schu.png"
              />
            </view>
          </view>
        </view>
      </view>
      </view>
      </swiper-item>
      <swiper-item class="text-content">
        <view>
      <view class="kong" v-if="!copyList.length">
        <image
          style="width: 610rpx; height: 368rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
        />
        <text>暂无内容</text>
      </view>
      <view v-else>
        <view class="item" v-for="(item, index) in copyList" :key="item.id">
          <view class="text">{{ item.content }}</view>
          <view class="item-bottom">
            <view class="btns">
              <image
                @click="editW(item)"
                class="edit"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_xgai.png"
              />
              <image
                @click="delW(item, index)"
                class="del"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_schu.png"
              />
            </view>
          </view>
        </view>
      </view>
      </view>
      </swiper-item>
    </swiper>
    <view class="flxed" v-if="isShow==3">
        <button class="add" @click="addM(0)">添加新产品</button>
      </view>
    <view class="flxed" v-if="isShow==0">
        <button class="add" @click="addV(0)">添加新口播</button>
      </view>
    <view class="flxed" v-if="isShow==1">
        <button class="add" @click="addW()">添加新文案</button>
      </view>
  </view>
  <uni-popup ref="add" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close('add')"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        {{edit?'修改':'添加新口播'}}
      </view>
      <!-- <scroll-view scroll-x class="scroll">
        <view
          class="scroll-item"
          v-for="item in scrollCate"
          :key="item.id"
          @click="clickCate(item)"
          :class="scrollText == item.id ? 'scroll-style' : ''"
          >{{ item.name }}</view
        >
      </scroll-view> -->
      <view class="textarea"
        ><fui-textarea
          @confirm='changeInput'
          @click="changeInput"
          @blur="changeInput"
          @focus="changeInput"
          height="170rpx"
          padding="0"
          :borderTop="false"
          :borderBottom="false"
          v-model="textarea"
          placeholder="请输入口播内容"
          placeholder-style="font-size:28rpx"
          maxlength="100"
          isCounter
          counterColor="rgb(144,147,153)"
          counterSize="24"
        ></fui-textarea
      ></view>
      <!-- <textarea v-model="textarea" class="textarea" placeholder="请输入口播内容" placeholder-style="font-size:28rpx"></textarea> -->
      <!-- <view class="zi"
        >
        <text :class="textarea.length ? 'textarea-style' : ''"
          >{{ textarea.length }}字/100</text
        ></view
      > -->
      <view class="flxed">
        <button
          @click="addVoice"
          class="tianjia"
          :class="textarea ? 'tianjia-style' : ''"
        >
          添加
        </button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="from" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close('from')"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        添加新模板
      </view>
      <view class="from">
        <view class="name">
          <text>产品名称<text style="color: rgb(255, 55, 71)">*</text></text>
          <input
            v-model="product"
            class="input"
            type="text"
            placeholder="如双人套餐"

          />
        </view>
        <view class="name">
          <text>产品价格<text style="color: rgb(255, 55, 71)">*</text></text>
          <input
            v-model="price"
            class="input"
            type="digit"
            placeholder="如29.9"
          />
        </view>
      </view>
      <view class="flxed">
        <view @click="addCopy" class="tianjia tianjia-style">确认</view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="addC" :safe-area="false" @change="popupChange">
    <view class="popup">
      <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        添加文案素材
      </view>
      <text style="font-size: 24rpx; color: rgb(252, 139, 0); margin: 30rpx"
        >提示：一行建议显示12个字符，请手动换行，最多四行。</text
      >
      <view style="height: 1072rpx; padding: 30rpx; box-sizing: border-box">
        <view class="textarea">
          <fui-textarea
          @input="textInput"
            maxlength="51"
            height="240rpx"
            size="36"
            :borderTop="false"
            :borderBottom="false"
            :value="cusTitle"
            placeholder-style="color:rgb(144,147,153)"
            placeholder="请输入内容"
          />
        </view>
      </view>
      <btnModule message="确认" @customClick="addOk" />
    </view>
  </uni-popup>
</template>

<style lang="scss">
.page {
  .recom {
    font-size: 32rpx;
    color: rgb(144, 147, 153);
  }
  .line {
    position: absolute;
    bottom: 0;
    width: 48rpx;
    height: 4rpx;
    background-color: rgb(142, 84, 244);
    border-radius: 118rpx;
    transition: all 0.5s;
    transform: translate(-248rpx);
  }
  .line1 {
    transform: translate(248rpx);
  }
  .line2 {
    transform: translate(0rpx);
  }
  .active {
    color: rgba(142, 84, 244, 1);
    // border-bottom: 2px solid rgba(142, 84, 244, 1);
    font-size: 32rpx;
    font-weight: 700;
  }
  .bottom {
    min-height: 1100rpx;
    background-color: rgb(246, 248, 251);
    padding: 42rpx 30rpx 300rpx;
    box-sizing: border-box;
    overflow-y: scroll;
    .all {
      display: flex;
      width: 150rpx;
      height: 42rpx;
      margin: 0 0 30rpx 12rpx;
      font-size: 28rpx;
      color: rgba(142, 84, 244, 1);
      line-height: 42rpx;
      text-align: center;
      .sanjiao {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent; /* 左边透明边框 */
        border-right: 8rpx solid transparent; /* 右边透明边框 */
        border-top: 16rpx solid rgb(142, 84, 244); /* 底部边框颜色决定三角形颜色 */
        margin-left: 6rpx;
        // background-color: rgb(142, 84, 244);
      }
    }
    .kong {
      width: 610rpx;
      margin: 120rpx auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: rgb(144, 147, 153);
    }
    .item {
      width: 690rpx;
      min-height: 208rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      .text {
        width: 100%;
        min-height: 72rpx;
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        border-bottom: 1px solid rgb(220, 223, 230);
      }
      .item-bottom {
        width: 100%;
        height: 48rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 30rpx;
        .lei {
          font-size: 28rpx;
          color: rgb(144, 147, 153);
        }
        .btns {
          width: 138rpx;
          height: 48rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .edit {
            width: 48rpx;
            height: 48rpx;
          }
          .del {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }
  }
  .flxed {
    width: 100%;
    height: 166rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .add {
      width: 690rpx;
      height: 88rpx;
      border-radius: 426rpx;
      margin: 10rpx 30rpx 0;
      font-size: 32rpx;
      color: rgba(142, 84, 244, 1);
      border: 1px solid rgba(142, 84, 244, 1);
      background-color: #fff;
    }
  }
  .mengban {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    .window {
      position: absolute;
      top: 230rpx;
      left: 30rpx;
      width: 202rpx;
      min-height: 462rpx;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
      box-shadow: 0 4rpx 40rpx rgb(61, 61, 61, 0.3);
      .window-jiantou {
        position: absolute;
        top: -12rpx;
        left: 30rpx;
        width: 24rpx;
        height: 12rpx;
      }
    }
  }
  .choose {
    color: rgba(142, 84, 244, 1) !important;
  }
  .text-content {
    width: 100%;
    height: 100%;
    min-height: 1200rpx;
    padding: 30rpx;
    padding-bottom: 300rpx;
    box-sizing: border-box;
    overflow-y: scroll;
    background-color: rgb(246, 248, 251);
    .kong {
      width: 610rpx;
      margin: 120rpx auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: rgb(144, 147, 153);
    }
    .item {
      width: 690rpx;
      min-height: 208rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      .text {
        width: 100%;
        min-height: 72rpx;
        font-size: 28rpx;
        padding-bottom: 30rpx;
        color: rgb(69, 70, 74);
        border-bottom: 1px solid rgb(220, 223, 230);
      }
      .item-bottom {
        width: 100%;
        height: 48rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 30rpx;
        .lei {
          font-size: 28rpx;
          color: rgb(144, 147, 153);
        }
        .btns {
          width: 138rpx;
          height: 48rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .edit {
            width: 48rpx;
            height: 48rpx;
          }
          .del {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }
    .text-item {
      width: 690rpx;
      padding-top: 1rpx;
      border-radius: 24rpx;
      margin-bottom: 30rpx;
      background-color: #fff;
      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 630rpx;
        margin: 36rpx 30rpx;
        font-size: 28rpx;
        color: rgb(144, 147, 153);
      }
      .text {
        color: rgb(69, 70, 74);
      }
      .moren {
        width: 630rpx;
        height: 120rpx;
        border-top: 1px solid rgb(220, 223, 230);
        margin: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: rgb(144, 147, 153);
        .btns {
          width: 138rpx;
          height: 48rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .flxed {
      width: 100%;
      height: 166rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      .add {
        width: 690rpx;
        height: 88rpx;
        border-radius: 426rpx;
        margin: 10rpx 30rpx 0;
        font-size: 32rpx;
        background-color: #fff;
        color: rgba(142, 84, 244, 1);
        border: 1px solid rgba(142, 84, 244, 1);
      }
    }
  }
}
.content {
  width: 100%;
  height: 1000rpx;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .scroll {
    height: 64rpx;
    margin: 42rpx 30rpx 42rpx 0;
    white-space: nowrap;
    .scroll-item {
      display: inline-block;
      width: 172rpx;
      height: 64rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
      background-color: #fff;
      margin-right: 30rpx;
      border-radius: 8rpx;
      &:nth-child(1) {
        margin-left: 30rpx;
      }
    }
  }
  .textarea {
    width: 690rpx;
    height: 260rpx;
    margin-top: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin-left: 30rpx;
    border: 1px solid rgb(220, 223, 230);
  }
  .zi {
    position: absolute;
    bottom: 594rpx;
    right: 60rpx;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
  }
  .flxed {
    width: 100%;
    height: 166rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .tianjia {
      width: 690rpx;
      height: 88rpx;
      margin: 10rpx 30rpx 0;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      background-color: rgba(241, 241, 241, 1);
      color: rgb(192, 196, 204);
    }
  }
  .from {
    // overflow-y: scroll;
    width: 690rpx;
    height: 240rpx;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    padding: 0 30rpx;
    margin: 30rpx;
    box-sizing: border-box;
    margin-bottom: 0;
    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 630rpx;
      height: 116rpx;
      font-size: 30rpx;
      color: rgb(69, 70, 74);
      border-bottom: 1px solid rgb(220, 223, 230);
      &:nth-child(2) {
        border: none;
      }
      .input {
        text-align: right;
      }
    }
    .copy {
      width: 630rpx;
      height: 232rpx;
      padding-top: 36rpx;
      border-bottom: 1px solid rgb(220, 223, 230);
      .copy-text {
        height: 124rpx;
        width: 630rpx;
      }
      .ai {
        margin: 30rpx 0 36rpx 545rpx;
        font-size: 28rpx;
        color: rgb(142, 84, 244);
      }
    }
  }
}
.scroll-style {
  background-color: rgb(142, 84, 244) !important;
  color: #fff !important;
}
.tianjia-style {
  background-color: rgb(142, 84, 244) !important;
  color: #fff !important;
}
.textarea-style {
  color: rgb(142, 84, 244) !important;
}
.productku {
  padding: 30rpx;
  padding-bottom: 300rpx;
  min-height: 1200rpx;
  box-sizing: border-box;
  overflow-y: scroll;
  .kong {
    width: 610rpx;
    margin: 120rpx auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
  }
  .item {
    width: 690rpx;
    height: 312rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    .text {
      width: 100%;
      height: 72rpx;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      border-bottom: 1px solid rgb(220, 223, 230);
    }
    .item-bottom {
      width: 100%;
      height: 48rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 30rpx;
      .lei {
        font-size: 28rpx;
        color: rgb(144, 147, 153);
      }
      .btns {
        width: 138rpx;
        height: 48rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .edit {
          width: 48rpx;
          height: 48rpx;
        }
        .del {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
}
.popup {
  width: 100%;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  .kong {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    .img {
      width: 610rpx;
      height: 368rpx;
      margin-top: 132rpx;
      margin-bottom: 42rpx;
    }
  }
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .accord {
    font-size: 28rpx;
    color: rgb(144, 147, 153);
    text-align: center;
    margin: 30rpx 0;
  }
  .textarea {
    position: relative;
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    border: 2rpx solid rgb(220, 223, 230);
    border-radius: 16rpx;
    // margin-bottom: 30rpx;
    font-size: 28rpx;
    // margin-left: 20rpx;
    //     .pseudo-textarea-input {
    //   width: 100%;
    //   box-sizing: border-box;
    //   padding: 10px;
    //   border: none;
    //   resize: both;
    //   overflow: auto;
    // }
  }
  .time {
    position: absolute;
    top: 507rpx;
    left: 60rpx;
    font-size: 28rpx;
    color: rgb(142, 84, 244);
  }
  .ignorant {
    font-size: 28rpx;
    text-align: right;
    color: rgb(69, 70, 74);
  }
  .refer {
    .tip {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      font-size: 24rpx;
      color: rgb(144, 147, 153);
      .change {
        display: flex;
        align-items: center;
        color: rgb(142, 84, 244);
        font-size: 28rpx;
      }
    }
    .box-item {
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
    }
  }
  .checked {
    border: 2rpx solid rgb(142, 84, 244) !important;
  }
  .popup-content {
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 905rpx;
    border-top: 2rpx solid rgb(220, 223, 230);
    border-bottom: 2rpx solid rgb(220, 223, 230);
    .title-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 136rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
    }
    .box-item {
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
    }
  }
  .cus-middle {
    padding: 30rpx;
    box-sizing: border-box;
    height: 905rpx;
    .cus-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cus-content {
        width: 618rpx;
        min-height: 214rpx;
        background-color: rgb(249, 249, 249);
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        .cus-image {
          text-align: right;
          margin-top: 24rpx;
        }
      }
    }
  }
  .bottom-btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    .all {
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
    }
    .verify {
      width: 552rpx;
      height: 86rpx;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      background-color: rgb(142, 84, 244);
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
}
</style>